<template>
  <div id="consoleDataWe" v-loading="loading" class="consoleDataWe">
    <div class="consoleData_top">
      <div class="data_top_title r_flex_space">
        <div class="top_title r_flex_center">
          <i />
          <p>汇总数据</p>
        </div>
        <div class="r_flex_center">
          <el-tooltip
            class="item"
            effect="dark"
            content="温馨提示：该查询仅对汇总数据模块进行时间筛选"
            placement="top"
          >
            <div>
              <i style="color: #918ef9" class="el-icon-question" />
            </div>
          </el-tooltip>
          <el-date-picker
            v-model="dataTotalBo.alltime"
            size="small"
            style="width: 240px"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            type="daterange"
            prefix-icon="el-icon-s-order"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changtime"
          />
          <div class="timeQuery r_transform2" @click="dateQuery">查询</div>
        </div>
      </div>

      <div class="data_top_center r_flex_space">
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">获客余额</p>
            <p class="data_back_p2">
              <span>￥</span>
              {{ statisticsDta.deptAmount }}
            </p>
          </div>
          <div class="data_text">
            <p class="data_text_p1 r_flex" style="flex-direction: row">
              <el-tooltip
                class="item"
                effect="dark"
                content="温馨提示：重要程度为3星及3星以上为重要客户"
                placement="top"
              >
                <div>
                  <i
                    style="color: #333; margin-right: 4px"
                    class="el-icon-question"
                  />
                </div>
              </el-tooltip>
              重要客户
            </p>
            <p class="data_text_p2">{{ statisticsDta.importNum }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">总获客</p>
            <p class="data_back_p2">{{ statisticsDta.allNum }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">业务员</p>
            <p class="data_text_p2">{{ statisticsDta.businessNum }}</p>
          </div>
        </div>

        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">今日获客</p>
            <p class="data_back_p2">{{ statisticsDta.todayNum }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">接单中业务员</p>
            <p class="data_text_p2">{{ statisticsDta.onBusinessNum }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">今日已接单</p>
            <p class="data_back_p2">{{ statisticsDta.acceptNum }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1" style="opacity: 0">待定</p>
            <p class="data_text_p2" style="opacity: 0">待定</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">今日未接单</p>
            <p class="data_back_p2">{{ statisticsDta.noAcceptNum }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1" style="opacity: 0">待定</p>
            <p class="data_text_p2" style="opacity: 0">待定</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 折线图 -->
    <div class="r_flex">
      <div class="statistics_left">
        <div class="box_border">
          <div class="data_top_title r_flex_space">
            <div class="r_flex_center">
              <i />
              <p>七日数据</p>
            </div>
            <div />
          </div>
          <div id="main" class="zhexianMap" style="width: 100%" />
        </div>
      </div>
      <div class="box_border statistics_right">
        <div class="data_top_title r_flex_space">
          <div class="r_flex_center">
            <i />
            <p>业务员榜单</p>
            <div class="r_transform4 paixBorder">
              <span
                :class="rankParm.isAsc ? 'el_icon' : ''"
                class="iconfont icon-sort-up-full"
                @click="changSj(4)"
              />
              <span
                :class="!rankParm.isAsc ? 'el_icon' : ''"
                class="iconfont icon-sort-down-full"
                @click="changSj(4)"
              />
            </div>
          </div>
          <div
            class="r_flex_center date_type r_transform2"
            style="margin-right: 0.37rem"
          >
            <p
              :class="activeDate === 1 ? 'dateActive' : ''"
              @click="changDate(1)"
            >
              <i />日
            </p>
            <p
              :class="activeDate === 2 ? 'dateActive' : ''"
              @click="changDate(2)"
            >
              <i />周
            </p>
            <p
              :class="activeDate === 3 ? 'dateActive' : ''"
              @click="changDate(3)"
            >
              <i />月
            </p>
            <p
              :class="activeDate === 0 ? 'dateActive' : ''"
              @click="changDate(0)"
            >
              <i />全部
            </p>
          </div>
        </div>
        <div class="rankBorder">
          <div
            v-for="(data, index) in rankingData"
            :key="index"
            class="rank_list"
          >
            <div class="r_flex_space">
              <p class="rank_text1 rank_text_name r_text">
                {{ data.userName }}
              </p>
              <p class="rank_text1">{{ data.num }}/单</p>
            </div>
            <div class="xiantiao">
              <div
                class="xtwidth r_transform5"
                :style="
                  'width:' +
                  (Number(maxNumDate) == 0
                    ? 0
                    : (Number(data.num) / Number(maxNumDate)) * 100) +
                  '%;'
                "
              />
            </div>
          </div>
        </div>
        <img
          v-show="rankingData.length == 0"
          class="zhanwei"
          src="../../../assets/images/zhanwei.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  dataTotal,
  sevenApplys,
  sevenData,
  cityTotal,
  userRanks,
  dataoverview,
} from "@/api/business/total";
import * as echarts from "echarts";
import "../../../../static/js/china.js";
import countTo from "vue-count-to";
import moment from "moment";

export default {
  name: "ConsoleDataWe",
  components: {
    countTo,
  },
  data() {
    return {
      // loading 加载
      loading: false,
      // 表达统计主体
      statisticsDta: {
        acceptNum: 0,
        allNum: 0,
        businessNum: 0,
        deptAmount: 0,
        importNum: 0,
        noAcceptNum: 0,
        onBusinessNum: 0,
        todayNum: 0,
      },
      // 查询参数
      dataTotalBo: {
        pageNum: 1,
        pageSize: 999,
        startTime: "",
        endTime: "",
        alltime: "",
      },
      num: 94567.99,
      // 图表参数
      myChartData: {},
      myChartCity: [],
      ChartCityData: [],
      // 排行榜数据
      rankingData: [
        { name: "安逸花", num: 80 },
        { name: "安逸花", num: 70 },
        { name: "安逸花", num: 60 },
        { name: "安逸花", num: 50 },
        { name: "安逸花", num: 40 },
        { name: "安逸花", num: 30 },
        { name: "安逸花", num: 20 },
        { name: "安逸花", num: 10 },
        { name: "安逸花", num: 4 },
      ],
      rankParm: {
        // 升序
        isAsc: "",
        pageNum: 1,
        pageSize: 99,
        startTime: "",
        endTime: "",
      },
      xrKey: true,
      activeDate: 0,
      maxNumDate: 1000,
    };
  },
  created() {
    // this.getdataTotal()
    // this.cityTotal()
    this.rankList();
  },
  mounted() {
    // elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
    var elementResizeDetectorMaker = require("element-resize-detector");
    // 创建实例，无参数
    var erd = elementResizeDetectorMaker(); // 使用默认选项（将使用基于对象的方法）。
    erd.listenTo(
      document.getElementsByClassName("staticNextMain"),
      (element) => {
        // var width = element.offsetWidth;
        // var height = element.offsetHeight;
        // self.tableHeight = height-100 //将监听到的宽高进行赋值
        // self.tableWidth = width-20
        // console.log("Size: " + width + "x" + height,tableHeight);
        if (this.myChartData) {
          setTimeout(() => {
            if (this.xrKey) {
              var myChart = echarts.init(document.getElementById("main"));
              myChart.resize();
              var chinaMap = echarts.init(document.getElementById("chinaMap"));
              chinaMap.resize();
              this.xrKey = false;
            }
          }, 300);
          setTimeout(() => {
            this.xrKey = true;
          }, 900);
        }
      }
    );
    // 屏幕适配
    this.$nextTick(() => {
      this.adapter();
    });
    // 进页面重新拉取数据
    this.getdataTotal();
  },
  methods: {
    // 屏幕适配
    adapter() {
      const adapHeight =
        window.screen.availHeight -
        document.getElementsByClassName("index_header")[0].scrollHeight -
        document.getElementsByClassName("consoleData_top")[0].scrollHeight -
        document.getElementsByClassName("data_top_title")[0].scrollHeight -
        85;
      document.getElementsByClassName("zhexianMap")[0].style.height = `${
        adapHeight < 250 ? 250 : adapHeight
      }px`;
      document.getElementsByClassName("rankBorder")[0].style.height = `${
        adapHeight < 250 ? 250 : adapHeight
      }px`;
      var myChart = echarts.init(document.getElementById("main"));
      myChart.resize();
    },
    // 时间选择
    changtime(newtime) {
      this.dataTotalBo.startTime = newtime ? newtime[0] : "";
      this.dataTotalBo.endTime = newtime ? newtime[1] : "";
    },
    // 排名参数
    changSj() {
      this.rankParm.isAsc = this.rankParm.isAsc == "asc" ? "" : "asc";
      this.rankList();
    },
    changDate(type) {
      this.activeDate = type;
      if (type === 1) {
        this.rankParm.startTime = moment()
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss");
        this.rankParm.endTime = moment()
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (type === 2) {
        this.rankParm.startTime = moment()
          .startOf("weeks")
          .format("YYYY-MM-DD HH:mm:ss"); // 本周开始日期 2021-01-18
        this.rankParm.endTime = moment()
          .endOf("weeks")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (type === 3) {
        this.rankParm.startTime = moment()
          .startOf("months")
          .format("YYYY-MM-DD HH:mm:ss"); // 本周开始日期 2021-01-18
        this.rankParm.endTime = moment()
          .endOf("months")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (type === 0) {
        this.rankParm.startTime = "";
        this.rankParm.endTime = "";
      }

      this.rankList();
    },
    dateQuery() {
      this.getdataTotal();
    },
    // 随机0-1000的数
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    // 排行榜
    rankList() {
      userRanks(this.rankParm).then((response) => {
        this.maxNumDate = response.data.maxNum;
        this.rankingData = response.data.ranks;
      });
    },
    getdataTotal() {
      this.loading = true;
      dataoverview(this.dataTotalBo)
        .then((response) => {
          this.statisticsDta = response.data;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
      sevenApplys().then((response) => {
        this.myChartData = response.data;
        // 7日折线图
        this.xuanranMyChart();
      });
    },
    cityTotal() {
      cityTotal().then((response) => {
        this.myChartCity = response.data;
        // 中国地图分布
        this.xuanranChinaMap();
      });
    },
    xuanranMyChart(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 图表X轴：日期
      var Xdata = this.myChartData.map((value) => value.date.substr(5, 16));
      // 图表Y轴：数量
      // applyNum	大额贷申请数	integer(int64)
      // var YapplyNum = this.myChartData.map(value => value.applyNum)
      // applyPrice	大额贷申请收益	number(bigdecimal)
      var YapplyPrice = this.myChartData.map((value) => value.num);
      // jisuNum	极速贷点击数	integer(int64)
      // var YjisuNum = this.myChartData.map(value => value.jisuNum)
      // jisuPrice	极速贷点击收益	number(bigdecimal)
      // var YjisuPrice = this.myChartData.map(value => value.jisuPrice)
      // pay支出	number(bigdecimal)
      // var Ypay = this.myChartData.map(value => value.pay)
      // profits收益
      // var Yprofits = this.myChartData.map(value => value.profits)

      var seriesNumber = [
        // { name: '大额贷申请数', data: YapplyNum , clolr: '#2e6cf6', clolr2: '#b9ceff' },
        { name: "获客数统计", data: YapplyPrice, clolr: "#18B9A0" },
        // { name: '极速贷点击数', data: YjisuNum , clolr: '#9E51FC' },
        // { name: '极速贷点击收益', data: YjisuPrice, clolr: '#673ab7' },
        // { name: '平台总支出', data: Ypay, clolr: '#FE5B9C' },
        // { name: '平台总收益', data: Yprofits, clolr: '#CD86FE' }
      ];
      var seriesData = [];
      seriesNumber.map((value) => {
        seriesData.push({
          name: value.name,
          type: "line",
          data: value.data,
          symbolSize: 7,
          symbol: "circle",
          smooth: true,
          itemStyle: {
            normal: {
              // borderColor: value.clolr,
              color: value.clolr,
              borderWidth: 4,
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: value.clolr,
              },
              {
                offset: 1,
                color: "#fff",
              },
            ]),
          },
          emphasis: {
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: value.clolr,
                  },
                  {
                    offset: 0.4,
                    color: value.clolr,
                  },
                  {
                    offset: 0.5,
                    color: "#fff",
                  },
                  {
                    offset: 0.7,
                    color: "#fff",
                  },
                  {
                    offset: 0.8,
                    color: "#fff",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ],
              },
              borderColor: value.clolr,
              borderWidth: 2,
            },
          },
          smooth: true,
        });
      });

      // 图表属性
      var option = {
        backgroundColor: "#fff",
        title: {
          text: "",
          left: "0%",
          top: "0%",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
        },
        // 说明位置
        legend: {
          show: true,
          icon: "circle",
          top: "0%",
          right: "4.5%",
          itemWidth: 10,
          itemHeight: 12,
          itemGap: 25,
        },
        // 图表位置
        grid: {
          top: "12%",
          left: "2%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisLine: {
              lineStyle: {
                color: "#b5bed1",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#b5bed1",
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#b5bed1",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#b5bed1",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        // 大额贷申请数，极速贷点击数，平台总支出，平台总收益统计图表，
        series: seriesData,
      };

      if (data) {
        myChart.resize();
      } else {
        // 绘制图表
        myChart.setOption(option);
      }
    },
    xuanranChinaMap() {
      this.ChartCityData = this.myChartCity.map((value) => ({
        name:
          value.province.indexOf("新疆") != -1
            ? "新疆"
            : value.province.indexOf("黑龙江") != -1
            ? "黑龙江"
            : value.province.indexOf("西藏") != -1
            ? "西藏"
            : value.province.indexOf("广西") != -1
            ? "广西"
            : value.province.indexOf("宁夏") != -1
            ? "宁夏"
            : value.province.indexOf("内蒙古") != -1
            ? "内蒙古"
            : value.province.indexOf("香港") != -1
            ? "香港"
            : value.province.indexOf("澳门") != -1
            ? "澳门"
            : value.province.slice(0, 2),
        value: value.num,
      }));
      // 基于准备好的dom，初始化echarts实例
      var ChinaMap = echarts.init(document.getElementById("chinaMap"));

      // 图表属性
      var chinaOption = {
        //   title: {
        //       text: '大额贷申请城市分布统计',
        //       subtext: '',
        //       left: 'center'
        //   },
        tooltip: {
          trigger: "item",
          left: "2.5%",
          textStyle: {
            align: "left",
          },
        },
        color: ["#155eff"],
        // 说明位置
        legend: {
          show: true,
          icon: "circle",
          top: "6%",
          right: "2.5%",
          itemWidth: 10,
          itemHeight: 12,
          itemGap: 25,
          data: ["大额贷申请数"],
        },
        // 图表位置
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        visualMap: {
          min: 0,
          right: "0%",
          left: "8.5%",
          bottom: "8%",
          text: ["高", "低"], // 文本，默认为数值文本
          // min: 0,
          max: 1000,
          inRange: {
            color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#20389C"],
          },
          calculable: false,
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },

        series: [
          {
            name: "大额贷申请数",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#071E51",
              },
              emphasis: {
                areaColor: "#49DAF8",
                textColor: "#49DAF8",
              },
            },

            //   data: this.ChartCityData
            data: [
              { name: "北京", value: this.randomData() },
              { name: "天津", value: this.randomData() },
              { name: "上海", value: this.randomData() },
              { name: "重庆", value: this.randomData() },
              { name: "河北", value: this.randomData() },
              { name: "河南", value: this.randomData() },
              { name: "云南", value: this.randomData() },
              { name: "辽宁", value: this.randomData() },
              { name: "黑龙江", value: this.randomData() },
              { name: "湖南", value: this.randomData() },
              { name: "安徽", value: this.randomData() },
              { name: "山东", value: this.randomData() },
              { name: "新疆", value: this.randomData() },
              { name: "江苏", value: this.randomData() },
              { name: "浙江", value: this.randomData() },
              { name: "江西", value: this.randomData() },
              { name: "湖北", value: this.randomData() },
              { name: "广西", value: this.randomData() },
              { name: "甘肃", value: this.randomData() },
              { name: "山西", value: this.randomData() },
              { name: "内蒙古", value: this.randomData() },
              { name: "陕西", value: this.randomData() },
              { name: "吉林", value: this.randomData() },
              { name: "福建", value: this.randomData() },
              { name: "贵州", value: this.randomData() },
              { name: "广东", value: this.randomData() },
              { name: "青海", value: this.randomData() },
              { name: "西藏", value: this.randomData() },
              { name: "四川", value: this.randomData() },
              { name: "宁夏", value: this.randomData() },
              { name: "海南", value: this.randomData() },
              { name: "台湾", value: this.randomData() },
              { name: "香港", value: this.randomData() },
              { name: "澳门", value: this.randomData() },
            ],
          },
        ],
      };

      // 绘制图表
      ChinaMap.setOption(chinaOption);
    },
  },
};
</script>

<style>
#consoleDataWe .el_icon {
  color: #918ef9 !important;
}

#consoleDataWe .el-date-editor .el-range__icon {
  color: #918ef9 !important;
}

#consoleDataWe .el-range-editor--small .el-range-separator {
  line-height: 20px;
}
</style>
